<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        v-model="workType"
        placeholder="工卡执行类型"
        clearable
        style="width: 190px"
        class="filter-item"
      >
        <el-option v-for="item in workTypes" :key="item" :label="item" :value="item"/>
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-delete" @click="handleDelete">删除</el-button>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-upload"
        @click="handleUpload"
      >上传移动工卡至服务器</el-button>
    </div>
    <div class="filter-container">
      <el-checkbox v-model="finished" class="filter-item" label="工卡已完成"/>
    </div>
    <el-table :data="workdatas" stripe fit highlight-current-row style="width: 100%">
      <el-table-column label="选择" type="selection" width="55"/>
      <el-table-column v-for="(value,key) in workheader" :key="key" :label="value" align="center">
        <template slot-scope="scope">{{ scope.row[key] }}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      finished: '',
      groupedWorkcards: [
        {
          worktype: 'J1 机械安装',
          header: {
            id: '编号',
            implement: '施工信息',
            workProcess: '工艺规范',
            workType: '工卡执行类型',
            model: '机型号',
            frameNo: '架机号'
          },
          data: [
            {
              id: '1',
              implement: '实施1',
              workProcess: '工艺规范1',
              workType: 'J1 机械安装',
              model: 'X1',
              frameNo: '架机号1'
            },
            {
              id: '2',
              implement: '实施2',
              workProcess: '工艺规范2',
              workType: 'J1 机械安装',
              model: 'X2',
              frameNo: '架机号2'
            },
            {
              id: '3',
              implement: '实施3',
              workProcess: '工艺规范3',
              workType: 'J1 机械安装',
              model: 'X3',
              frameNo: '架机号3'
            },
            {
              id: '4',
              implement: '实施4',
              workProcess: '工艺规范4',
              workType: 'J1 机械安装',
              model: 'X4',
              frameNo: '架机号4'
            }
          ]
        },
        {
          worktype: '测试系统检查',
          header: {
            workType: '工卡执行类型',
            model: '机型号',
            frameNo: '架机号',
            mydate: '日期'
          },
          data: [
            {
              workType: '测试系统检查',
              model: 'Y1',
              frameNo: '架机号1',
              mydate: '2018-11-1'
            },
            {
              workType: '测试系统检查',
              model: 'Y2',
              frameNo: '架机号2',
              mydate: '2018-11-2'
            },
            {
              workType: '测试系统检查',
              model: 'Y3',
              frameNo: '架机号3',
              mydate: '2018-11-3'
            }
          ]
        }
      ],
      workheader: [],
      workdatas: [],
      workType: null,
      workTypes: [
        'J1 机械安装',
        'J1 机械拆除',
        '机械生产准备',
        'D4 机械检查、试验及配合工作',
        '机械称重',
        'D3 电气安装',
        'D3 电气拆除',
        '电气检查、试验及配合工作',
        '电气盒体机柜类制作',
        '电气线缆地面制作',
        '电气线缆机上敷设',
        '电气线缆机上制作',
        '测试系统检查',
        '校准'
      ]
    }
  },
  watch: {
    workType(selectedValue) {
      this.workheader = this.getWorkCardHeaderByType(selectedValue)
      this.workdatas = this.getWorkCardDataByType(selectedValue)
    }
  },
  methods: {
    ...mapMutations(['ADD_WORKINSTRUCTION_ROUTERS']),
    getWorkCardHeaderByType(workType) {
      return this.groupedWorkcards.filter(v => v.worktype === workType)[0]
        .header
    },
    getWorkCardDataByType(workType) {
      return this.groupedWorkcards.filter(v => v.worktype === workType)[0].data
    },
    handleUpload() {
      const abc = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || null
      if (abc) {
        alert('支持')
      } else {
        alert('不支持')
      }
    },
    handleDelete() {}
  }
}
</script>
